<template>

  <div  class="mdui-container">
  <div class="mdui-card" style="width: 300px;float:right;margin-top: 60px">



    <!-- 卡片的内容 -->
    <div class="mdui-card-content">

      <div class="mdui-textfield">
        <input class="mdui-textfield-input" type="text" placeholder="手机号" v-model="phone_number"/>
      </div>
      <div class="mdui-textfield">
        <input class="mdui-textfield-input" type="password" placeholder="密码" v-model="password"/>
      </div>

    </div>




    <!-- 卡片的按钮 -->
    <div class="mdui-card-actions">
      <button class="mdui-btn mdui-ripple mdui-float-right" v-on:click="login()">登录</button>

    </div>

  </div>

  </div>
</template>

<script>
  import * as mdui from "mdui";
  import axios from "axios";
  import qs from "qs";
  import jm from "./../../static/jm"

  const BASE_URL = 'http://127.0.0.1:8886';
  export default {
    name: 'login',
    data () {
      return {
        phone_number: '',
        password: ''
      }
    },
    methods:{
      login:function(){

        if(this.phone_number.length!=11) {
          mdui.default.alert('请检查手机号码');
          return;
        }
        if(this.password.length<9) {
          mdui.default.alert('请输入9位以上密码');
          return;
        }
        axios.post(BASE_URL +'/user/login',
          qs.stringify({phone_number:this.phone_number,password: jm(this.password)}),
          {'headers': {'Content-Type': 'application/x-www-form-urlencoded'}})
          .then(re => {
            if(re.data.状态码===200)
            {
              window.localStorage.setItem("token",re.data.token);
              this.$router.push("/home");
            }
            else
            {
              mdui.default.alert(re.data.备注);
            }
          })
          .catch(err=>{
            mdui.default.alert("网络错误");

          })

      }
    },
    mounted() {

    }
  }
</script>

